
<script>
export default {
  data() {
    return {
      radio: '1',
      value: '',
      show: false,
      orderId:'',
      user:{},
    }
  },
  watch:{

  },
  methods: {

    goToHistory(){
      history.back();
    },
    showPopup(){
      window.open(`http://localhost:10086/api/order/alipay/pay?orderId=${this.orderId}&radio=${this.radio}&nickName=${this.user.nickname}`)
    },
    hao(){
      this.$router.push({ path: '/details/detailsView' })
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    this.orderId= this.$route.query.orderId
    console.log(this.orderId)
    if (this.user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }

  }
}
</script>

<template>
<div>
  <div class="yi">
    <div><van-icon  @click="goToHistory" class="fan" name="arrow-left" /></div>
    <span class="fu">付款方式</span>
    <van-icon class="jia" name="plus" />
  </div>
  <div>
    <p class="zhi">支付方式</p>
  </div>
  <div class="payment-option">
    <img class="image" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/%E5%BE%AE%E4%BF%A1.png?e=1737187468&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:cuoPBfyMT30tO1X9FTJSOIGcmZw=" alt="微信图标">
    <div class="payment-text">
      <span class="wei">微信支付</span>
      <span class="sub-text">微信</span>
    </div>
    <van-radio-group v-model="radio">
      <van-radio class ="dan" name="1" checked-color="3474FF"></van-radio>
    </van-radio-group>
  </div>
  <hr style="margin-top: 15px;width: 260px">
  <div class="payment-option1">
    <img class="image" src="https://q7.itc.cn/q_70/images03/20241111/8b6a53a12a58457d87ceea336014303d.jpeg  " alt="支付宝图标">
    <div class="payment-text">
      <span class="wei">支付宝支付</span>
      <span class="sub-text">支付宝</span>
    </div>
    <van-radio-group v-model="radio">
      <van-radio class ="dan1" name="2" checked-color="3474FF"></van-radio>
    </van-radio-group>
  </div>
  <hr style="margin-top: 15px;width: 260px">
  <!-- 密码输入框 -->

  <div>
    <p class="zhi">信用卡支付</p>
  </div>

  <div class="payment-option2">
    <img  class="image" src="https://img.51miz.com/Element/00/84/47/73/e1ba5d9f_E844773_212cd180.png" alt="信用卡图标">
    <div class="payment-text">
      <span class="wei">招商银行</span>
      <span class="sub-text1">*******8930</span>
      <span class="sub-text1">{{user.nickname}}</span>
    </div>
    <van-radio-group v-model="radio">
      <van-radio class ="dan2" name="3" checked-color="3474FF"></van-radio>
    </van-radio-group>
  </div>
  <hr style="margin-top: 15px;width: 260px">

  <button class="kuan" @click="showPopup">
    付款
  </button>

  <van-popup v-model="show" class="ceng">
    <img class= "cg" src="http://mms2.baidu.com/it/u=1854701185,1072351989&fm=253&app=138&f=JPEG?w=304&h=304" alt="">
    <br>
    <p class="g">支付成功</p><br>
    <p class="ti">您的订单已支付成功，请尽快前往提车</p>
    <button class="hao" @click="hao">好的</button>
  </van-popup>
</div>
</template>

<style scoped>
@import "./payment.css";
</style>